<template>
	<view class="page" style="padding-bottom: 150rpx;">
		<topVue title="设置"></topVue>
		<view class="box margin20 flex align-center padding20">
			<view class="relative" style="width: 108rpx; height: 108rpx;">
				<u-avatar :src="user.avatar" size="108"></u-avatar>
				<view class="img absolute" @click="chooseFun()">
					<image src="../../static/person/edit.png" style="width: 38rpx; height: 38rpx;"></image>
				</view>
			</view>
			<view class="flex-column padding-row30">
				<view class="flex align-center">
					<text class="name">{{ user.nickname }}</text>
					<u-icon name="edit-pen-fill" size="36" color="#6B7280" @click="isNick=true"></u-icon>
				</view>
				<u-gap height="20"></u-gap>
				<view class="id">ID: {{ user.id }}</view>
			</view>
		</view>
		<view class="box margin20">
			<view class="title">收货地址管理</view>
			<view class="li flex-between align-center padding-row30" @click="$tools.route('./addressCenter')">
				<view class="label">收货地址</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		<view class="box margin20">
			<view class="title">账号安全与绑定</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="show20 = true">
				<view class="label">登录密码</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="show30 = true">
				<view class="label">支付密码</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="show40 = true">
				<view class="label">绑定邀请人</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<!-- <view class="li flex-between align-center padding-row30">
				<view class="label">切换账号</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view> -->
		</view>
		<view class="box margin20">
			<view class="title">隐私与条款</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="$tools.route('./service')">
				<view class="label">用户协议</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="li flex-between align-center padding-row30" @click="$tools.route('./privacy')">
				<view class="label">隐私政策</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
		</view>
		<view class="box margin20">
			<view class="title">关于</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="$tools.route('./about')">
				<view class="label">关于我们</view>
				<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
			</view>
			<view class="li flex-between align-center padding-row30 borderbottom" @click="checkVersion()">
				<view class="label">版本信息</view>
				<view class="value" style="color: #d81e06;" v-if="isUpdate">发现新版本V{{data.edition_name}}</view>
				<view class="value" v-else>V{{ location_version }}</view>
			</view>
		</view>
		
		<view class="botVue flex-between align-center padding-row30">
			<view class="loginoutBtn text-center" @click="show=true">退出登录</view>
			<view class="loginoutBtn text-center" @click="$tools.route('./switch')">切换账号</view>
		</view>
		
		<nickVue :show="isNick" @cancel="isNick=false"></nickVue>
		<popup :show="show" text="确认退出登录?" @cancel="show=false" @confirm="confirm"></popup>
		
		<!-- 登录密码 -->
		<u-popup v-model="show20" mode="center" border-radius="12" @close="pwd=''; rePwd=''; code='';">
			<view class="popVue padding40">
				<view class="title text-center">登录密码</view>
				<view class="inpVue margin30 flex align-center">
					<input type="text" v-model="user.mobile" disabled/>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="text" v-model="code" placeholder="请输入验证码"/>
					<view class="code" @click="sendFun()">{{text}}</view>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="password" v-model="pwd" placeholder="请输入新登录密码"/>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="password" v-model="rePwd" placeholder="请确认新登录密码"/>
				</view>
				
				<view class="btn margin50" @click="pwdFun()">确定</view>
			</view>
		</u-popup>
		
		<!-- 支付密码 -->
		<u-popup v-model="show30" mode="center" border-radius="12" @close="tradePwd=''; reTradePwd=''; code='';">
			<view class="popVue padding40">
				<view class="title text-center">支付密码</view>
				<view class="inpVue margin30 flex align-center">
					<input type="text" v-model="user.mobile" disabled/>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="text" v-model="code" placeholder="请输入验证码"/>
					<view class="code" @click="sendFun()">{{text}}</view>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="password" v-model="tradePwd" placeholder="请输入新支付密码"/>
				</view>
				<view class="inpVue margin20 flex align-center">
					<input type="password" v-model="reTradePwd" placeholder="请确认新支付密码"/>
				</view>
				
				<view class="btn margin50" @click="tradePwdFun()">确定</view>
			</view>
		</u-popup>
		
		<!-- 绑定推广人 -->
		<u-popup v-model="show40" mode="center" border-radius="12" @close="inviteCode='';">
			<view class="popVue padding40">
				<view class="title text-center">绑定邀请人</view>
				<view class="inpVue margin30 flex-between align-center padding-row20">
					<text style="color: #333; font-weight: 600; line-height: 1;">我的邀请码</text>
					<text style="color: #1CC289; font-weight: 600; line-height: 1;">{{ user.id }}</text>
				</view>
				<view class="inpVue margin20 flex align-center" v-if="user.inviter">
					<text style="color: #333; font-weight: 600; line-height: 1; padding-left: 20rpx;">
						已绑定用户【ID{{ user.inviter }}】
					</text>
				</view>
				<view class="inpVue margin20 flex align-center" v-else>
					<input type="number" v-model="inviteCode" placeholder="请输入邀请码(邀请人ID)"/>
				</view>
				<view class="btn margin50" @click="bandFun()">确定</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import nickVue from '../../components/nick.vue'
	import { mapState } from "vuex"
	import baseUrl from "@/common/url.js"
	export default {
		components: {
			nickVue
		},
		
		data(){
			return {
				show: false,
				location_version: "",
				isUpdate: false,
				isNick: false,
				data: {},
				show20: false,
				show30: false,
				show40: false,
				pwd: "",
				rePwd: "",
				text: "获取验证码",
				code: "",
				isSend: false,
				loading: false,
				tradePwd: "",
				reTradePwd: "",
				inviteCode: "",
				accountId: ""
			}
		},
		
		computed: {
			...mapState({
				user: state => state.user
			})
		},
		
		onLoad(option) {
			if(option.status) this.show30 = true
		},
		
		async onShow() {
			await this.getVersion()
		},
		
		methods: {
			// 退出登录
			async confirm(){
				this.show = false
				const result = await this.$request("/app-api/member/auth/logout", "POST")
				if(result.code===0) {
					this.$u.toast("退出成功")
					uni.removeStorageSync("token")
					setTimeout(()=>{
						uni.switchTab({
							url: "/pages/person/index"
						})
						this.$store.state.isLogin = false
						this.$store.state.user = {}
						this.$store.state.balanceInfo = {}
					}, 1000)
				}else {
					this.$u.toast(reslut.msg)
				}
			},
			
			// 登录密码
			async pwdFun(){
				if(this.loading) return
				if(!this.code) return this.$u.toast("请输入验证码")
				if(!this.pwd) return this.$u.toast("请输入登录密码")
				if(this.pwd!=this.rePwd) return this.$u.toast("两次密码输入不一致")
				this.loading = true
				const res = await this.$request("/app-api/member/user/reset-password", "PUT", {
					code: this.code,
					password: this.pwd,
					mobile: this.user.mobile
				})
				if(res.code===0) {
					this.$u.toast("登录密码设置成功")
					this.show20 = false
					this.code = ""
					this.pwd = ""
					this.rePwd = ""
					this.loading = false
				}else{
					this.loading = false
					this.$u.toast(res.msg)
				}
			},
			
			// 绑定领导人
			async bandFun(){
				if(this.user.inviter) return this.show40 = false
				if(this.user.id==this.inviteCode) return this.$u.toast("不能绑定自己为推广人")
				if(!this.inviteCode) return this.$u.toast("请输入推广码")
				const res = await this.$request("/app-api/member/user/bindAnInvite", "GET", {
					userId: this.user.id,
					inviter: this.inviteCode
				})
				if(res.code===0) {
					this.$u.toast("绑定成功")
					this.show40 = false
					this.$store.dispatch("getUser", this.user.id)
				}else{
					this.$u.toast(res.msg)
				}
			},
			
			// 设置支付密码
			async tradePwdFun(){
				if(this.loading) return
				if(!this.code) return this.$u.toast("请输入验证码")
				if(!this.tradePwd) return this.$u.toast("请输入支付密码")
				if(this.tradePwd!=this.reTradePwd) return this.$u.toast("两次支付密码输入不一致")
				this.loading = true
				const res = await this.$request("/app-api/member/user/set-pay-password", "PUT", {
					code: this.code,
					password: this.tradePwd
				})
				if(res.code===0) {
					this.$u.toast("支付密码设置成功")
					this.show30 = false
					this.code = ""
					this.tradePwd = ""
					this.reTradePwd = ""
					this.loading = false
				}else{
					this.loading = false
					this.$u.toast(res.msg)
				}
			},
			
			// 修改头像
			chooseFun(){
				this.$utils.choose(1).then(res=>{
					console.log(res.tempFilePaths[0])
					let tempFilePath = res.tempFilePaths[0]
					var token = uni.getStorageSync('token');
					console.log(token)
					var files=[];
					files.push({'name':'file','uri':tempFilePath});
					uni.uploadFile({
						url:baseUrl.url + '/app-api/infra/file/upload', //仅为示例，非真实的接口地址
						files:files,
						formData: {
							file: tempFilePath,
							path: "avatar/",
						},
						header: {
							"tenant-id": 162,
							Authorization: token,
						},
						success: (result) => {
							console.log(result)
							var data=JSON.parse(result.data);
							console.log(data)
							if(data.code==0){
								console.log(data.data)
								this.$request("/app-api/member/user/update", "PUT", {
									avatar: data.data,
								}).then(RES=>{
									if(RES.code===0) {
										this.$u.toast("修改成功")
										this.$store.dispatch("getUser")
									}
								})
							}
						},
						fail(err) {	
							console.log(err)
						}
					})
				})
			},
			
			checkVersion(){
				// #ifdef APP-PLUS
				if(!this.isUpdate) return this.$u.toast("当前为最新版本")
				uni.navigateTo({
					url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' + JSON.stringify(this.data)
				});
			// #endif
			},
			
			// 发送验证码
			async sendFun(){
				if(this.isSend) return
				this.isSend = true;
				const result = await this.$request("/app-api/member/auth/send-sms-code", "POST", {
					mobile: this.user.mobile,
					scene: 1
				})
				if(result.code===0) {
					this.$u.toast("验证码已发送")
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				}else{
					this.isSend = false;
					this.$u.toast(result.msg)
				}
			},
			
			// 获取版本信息
			getVersion(){
				let _this = this
				plus.runtime.getProperty(plus.runtime.appid, function(location_version) {
					_this.location_version = location_version.version
					let versionCode = Number(location_version.versionCode)
					console.log("本地版本", versionCode)
					_this.$request('/app-api/system/checkUpdate', "GET", {}).then(res => {
						console.log("线上版本", res.data.editionNumber)
						if (res.data.editionNumber > versionCode) {
							_this.isUpdate = true
							//如果是wgt升级，并且是静默更新 （如果是手动检查新版本，就不用判断静默更新，请直接跳转更新页，不然点击检查新版本后会没反应）
							_this.data = {
								describe: res.data.description, // 更新内容 支持<br>自动换行
								edition_url: res.data.editionUrl, //apk、wgt包下载地址或者应用市场地址
								edition_force: 0, //是否强制更新 0代表否 1代表是
								package_type: 0, //0是整包升级（apk或者appstore或者安卓应用市场） 1是wgt升级
								edition_issue: 0, //是否发行  0否 1是 为了控制上架应用市场审核时不能弹出热更新框
								edition_number: res.data.editionNumber, //版本号 manifest里的版本号 （服务器返回的edition_number是否大于当前app的版本号来实现）
								edition_name: res.data.editionName, // 版本名称 manifest里的版本名称
								edition_silence: 0 // 是否静默更新 0代表否 1代表是
							}
						}
					})
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.boxVue {
		width: 100%;
		.title {
			font-weight: 600;
			font-size: 34rpx;
			line-height: 1;
		}
		.li {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
		.btn {
			width: 690rpx;
			height: 92rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 15rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.popVue {
		width: 690rpx;
		.title {
			font-weight: 600;
			font-size: 34rpx;
			line-height: 1;
		}
		.btn {
			width: 100%;
			height: 92rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 15rpx;
			line-height: 92rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
		}
		.inpVue {
			width: 100%;
			height: 100rpx;
			border-radius: 12rpx;
			border: 1rpx solid #f5f5f5;
			input {
				flex: 1;
				height: 100rpx;
				box-sizing: border-box;
				color: #333;
				padding-left: 20rpx;
				line-height: 1;
				font-size: 28rpx;
			}
			.code {
				color: #1CC289;
				font-weight: 600;
				line-height: 1;
				padding-right: 20rpx;
			}
		}
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.title {
			color: #6B7280;
			font-size: 24rpx;
			padding: 30rpx 30rpx 0;
			font-weight: 600;
			line-height: 1;
		}
		.img {
			width: 38rpx;
			height: 38rpx;
			background: #fff;
			border-radius: 50%;
			bottom: 0;
			right: 0;
		}
		.id {
			color: #6B7280;
			line-height: 1;
		}
		.name {
			color: #374151;
			font-size: 32rpx;
			font-weight: 600; 
			line-height: 1;
			padding-right: 20rpx;
		}
		.li {
			width: 100%;
			height: 100rpx;
			.label {
				color: #374151;
				font-weight: 600;
				line-height: 1;
			}
			.value {
				color: #333;
				line-height: 1;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
		.borderbottom {
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
	.botVue {
		width: 750rpx;
		height: 140rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.loginoutBtn {
			width: 330rpx;
			height: 90rpx;
			border-radius: 18rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			color: #fff;
			line-height: 90rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	
	
</style>